<template>
  <view class="bg-white container">
    <!-- 传感器详情 -->
    <view v-if="baseInfo.type === '传感器'">
      <!-- 圆盘 -->
      <view class="circle-quality pad2y">
        <cmd-progress
          type="circle"
          :percent="35"
          :stroke-width="8"
          :width="280"
          :showInfo="false"
        ></cmd-progress>
        <view class="quality-content">
          <view class="flex sensor-container">
            <view class="flex items-center">
              <view>
                <view class="flex temp-view">
                  <image
                    src="/static/images/index-env-wd.png"
                    class="icon mr-2 icon-sensor"
                  />
                  <view class="title">温度</view>
                </view>
              </view>
              <view class="value value-temp self-end">{{
                baseInfo.properties.Temp | tempFix
              }}</view>
              <view class="title temp-unit">℃</view>
            </view>
            <view class="flex items-center justify-between humi-container">
              <view class="title">湿度</view>
              <image
                src="/static/images/index-env-sd.png"
                class="icon ml-2 mr-2 icon-sensor"
              />
              <view class="value value-humi">{{
                baseInfo.properties.Humi | humiFix
              }}</view>
              <view class="title">%</view>
            </view>
          </view>
        </view>
      </view>
      <!-- 方块格 -->
      <view class="sesonr-data grid grid-cols-2 gap-4 mb-4">
        <view
          class="grid grid-cols-3 gap-2 items-center justify-between shadow p-4 py-8 bg-white"
        >
          <text class="title col-span-3">PM2.5</text>
          <image
            src="/static/images/index-env-pm.png"
            class="icon icon-sensor"
          />
          <view class="col-span-2">
            <text class="value">{{ baseInfo.properties.PM25 }}</text>
            <text class="unit">g/m³</text>
          </view>
          <view class="col-span-3 progress">
            <progress
              percent="100"
              border-radius="2"
              :duration="5"
              active
              stroke-width="3"
              activeColor="#0AC7B9"
            />
          </view>
        </view>
        <view
          class="grid grid-cols-3 gap-2 items-center justify-between shadow p-4 py-8 bg-white"
        >
          <text class="title col-span-3">TVOC</text>
          <image
            src="/static/images/index-env-tvoc.png"
            class="icon icon-sensor"
          />
          <view class="col-span-2">
            <text class="value">{{ baseInfo.properties.TVOC }}</text>
            <text class="unit">g/m³</text>
          </view>
          <view class="col-span-3 progress">
            <progress
              percent="100"
              border-radius="2"
              :duration="5"
              active
              stroke-width="3"
              activeColor="#3FD4FB"
            />
          </view>
        </view>
        <view
          class="grid grid-cols-3 gap-2 items-center justify-between shadow p-4 py-8 bg-white"
        >
          <text class="title col-span-3">CO2</text>
          <image
            src="/static/images/index-env-co.png"
            class="icon icon-sensor"
          />
          <view class="col-span-2">
            <text class="value">{{ baseInfo.properties.CO2 }}</text>
            <text class="unit">ppm</text>
          </view>
          <view class="col-span-3 progress">
            <progress
              percent="100"
              border-radius="2"
              :duration="5"
              active
              stroke-width="3"
              activeColor="#FC6646"
            />
          </view>
        </view>
        <view
          class="grid grid-cols-3 gap-2 items-center justify-between shadow p-4 py-8 bg-white"
        >
          <text class="title col-span-3">甲醛</text>
          <image
            src="/static/images/index-env-jq.png"
            class="icon icon-sensor"
          />
          <view class="col-span-2">
            <text class="value">{{ baseInfo.properties.Cas || "-/-" }}</text>
            <text class="unit">ppm</text>
          </view>
          <view class="col-span-3 progress">
            <progress
              percent="100"
              border-radius="2"
              :duration="5"
              active
              stroke-width="3"
              activeColor="#FFAE0D"
            />
          </view>
        </view>
      </view>
    </view>
    <view v-else-if="['多联机空调'].includes(baseInfo.type)">
      <DetailAir :value="baseInfo"></DetailAir>
    </view>
    <view v-else-if="['新风全热交换机'].includes(baseInfo.type)">
      <DetailWindHot :value="baseInfo"></DetailWindHot>
    </view>
    <view v-else-if="['新风空调一体机'].includes(baseInfo.type)">
      <DetailWindAir :value="baseInfo"></DetailWindAir>
    </view>
    <!-- 灯 -->
    <view v-else-if="baseInfo.type === '灯'">
      <DetailLight :device="baseInfo" />
    </view>
    <view v-else>
      <text>暂不支持的设备类型</text>
    </view>
  </view>
</template>

<script>
import { mapState } from "vuex";
import { cmdProgress } from "@/components/cmd-progress/cmd-progress.vue";
import { getQualityByValue, getTextColor } from "@/utils/device";
import DetailAir from "./components/detail-air";
import DetailWindAir from "./components/detail-wind-air";
import DetailWindHot from "./components/detail-wind-hot";
import DetailLight from "./components/detail-light";

export default {
  data() {
    return {};
  },
  components: {
    cmdProgress,
    DetailAir,
    DetailLight,
    DetailWindAir,
    DetailWindHot,
  },
  filters: {
    statusText(status) {
      return status === 0 ? "已关闭" : "开启中";
    },
    tempFix(temp) {
      if (temp) {
        return temp.toFixed(0);
      }
      return "--";
    },
    humiFix(humi) {
      if (humi) {
        return humi.toFixed(0);
      }
      return "--";
    },
    qualityText(quality) {
      if (quality) return getQualityByValue(quality, "quality");
      return "优";
    },
  },
  mounted() {
    uni.setNavigationBarTitle({ title: this.baseInfo.name || "--" });
  },
  computed: {
    ...mapState({
      baseInfo: (state) => state.device.currentDevice,
    }),
  },
  methods: {},
  watch: {},
};
</script>

<style scoped lang="scss">
.container {
  height: 100%;
}
.icon-sensor {
  max-width: 56rpx;
  max-height: 56rpx;
}
.circle-quality {
  // width: 80rpx;
  // height: 80rpx;
  display: flex;
  justify-content: center;
  padding-top: 100rpx;
  position: relative;
  // margin-bottom: 6rpx;
  .quality-content {
    position: absolute;
    top: 40%;
    font-family: "PingFang SC";
    & .title {
      color: #97a5c9;
      font-size: 26rpx;
      font-weight: 500;
    }

    & .sensor-container {
      flex-direction: column;
    }

    & .value {
      color: #383c48;
    }
    & .value-temp {
      font-size: 120rpx;
    }
    & .temp-unit {
      padding-top: 58rpx;
    }
    & .value-humi {
      font-size: 50;
    }
    & .temp-view {
      flex-direction: column;
      justify-content: space-evenly;
      img {
        margin-bottom: 10rpx;
      }
    }
    & .humi-container {
      padding: 20rpx;
    }
  }
}
.sesonr-data {
  padding: 100rpx 30rpx;
  font-family: PingFang SC;
  .title {
    color: #383c48;
    font-size: 26rpx;
    font-weight: 400;
    margin-bottom: 10rpx;
  }
  .value {
    color: #282a33;
    font-size: 36rpx;
    font-weight: bold;
  }
  .unit {
    color: #808695;
    font-size: 24rpx;
    font-weight: 300;
    margin-left: 10rpx;
  }
  .progress {
    margin-top: 10rpx;
  }
}
</style>
